<template>
  <div class="order-container">
    <t-card class="list-card-container" :bordered="false">
      <!-- 搜索表单 -->
      <order-form
        @search="handleSearch"
        @add="handleAdd"
      />

      <!-- 数据表格 -->
      <order-list
        ref="listRef"
        :loading="loading"
        :data="orderList"
        :pagination="pagination"
        @page-change="onPageChange"
        @edit="handleEdit"
        @delete="handleDelete"
      />

      <!-- 编辑/新增弹窗 -->
      <t-dialog
        v-model:visible="formVisible"
        :header="formType === 'add' ? '新增' : '编辑'"
        :footer="false"
        width="800"
      >
        <order-edit-form
          :type="formType"
          :form-data="currentOrder"
          @success="onFormSuccess"
          @cancel="onFormCancel"
        />
      </t-dialog>

      <!-- 删除确认弹窗 -->
      <confirm-dialog
        v-model:visible="dialogVisible"
        title="删除确认"
        :content="`确定要删除'${currentOrder?.orderNumber}'吗？`"
        confirm-theme="danger"
        type="warning"
        icon="error-circle"
        @confirm="onDialogConfirm"
      />
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import OrderList from './components/list.vue';
import OrderForm from './components/form.vue';
import OrderEditForm from './components/editform.vue';
import ConfirmDialog from '@/components/dialog/ConfirmDialog.vue';
import { getOrderList, deleteOrder } from '@/api/product-orders';
import type { OrderInfo } from '@/api/product-orders';

const loading = ref(false);
const orderList = ref<OrderInfo[]>([]);
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const formVisible = ref(false);
const formType = ref<'add' | 'edit'>('add');
const currentOrder = ref<Partial<OrderInfo>>({});

const dialogVisible = ref(false);

// 获取列表
const fetchOrderList = async (params = {}) => {
  loading.value = true;
  try {
    const res = await getOrderList({
      ...params,
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize
    });
    if (res.records) {
      orderList.value = res.records;
      pagination.value.total = res.total;
    } else {
      MessagePlugin.error(res.message || '获取数据失败');
    }
  } catch (error) {
    console.error('获取列表失败:', error);
    MessagePlugin.error('获取列表失败');
  } finally {
    loading.value = false;
  }
};

// 处理搜索
const handleSearch = (params: any) => {
  pagination.value.current = 1; // 重置到第一页
  fetchOrderList(params);
};

// 新增
const handleAdd = () => {
  formType.value = 'add';
  currentOrder.value = {};
  formVisible.value = true;
};

// 编辑
const handleEdit = (row: OrderInfo) => {
  formType.value = 'edit';
  currentOrder.value = { ...row };
  formVisible.value = true;
};

// 删除
const handleDelete = (row: OrderInfo) => {
  currentOrder.value = row;
  dialogVisible.value = true;
};

// 确认删除
const onDialogConfirm = async () => {
  try {
    if (!currentOrder.value.id) {
      MessagePlugin.error('ID不存在');
      return;
    }
    await deleteOrder(currentOrder.value.id);
    MessagePlugin.success('删除成功');
    await fetchOrderList();
  } catch (error) {
    console.error('删除失败:', error);
    MessagePlugin.error('删除失败');
  } finally {
    dialogVisible.value = false;
  }
};

// 表单提交成功
const onFormSuccess = async () => {
  formVisible.value = false;
  await fetchOrderList();
};

// 取消表单
const onFormCancel = () => {
  formVisible.value = false;
};

// 分页变化
const onPageChange = async (pageInfo: { pageNum: number; pageSize: number }) => {
  pagination.value.current = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  await fetchOrderList();
};

onMounted(() => {
  fetchOrderList();
});
</script>

<style lang="less" scoped>
.list-card-container {
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  :deep(.t-card__body) {
    padding: 0;
  }
}

.order-container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style> 